<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-16-自定义指令</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- 自定义指令总结:
     一、配置对象中常用的三个回调
     （1）bind:       指令与元素成功绑定时调用
     （2）inserted:   指令所在元素被插入页面时调用
     （3）update:     指令所在模板被重新解析时调用

     二、备注
     （1）指令定义时不加 v-, 但使用时要加 v-
     （2）指令名如果是多个单词, 要用 kebab-case 命名方式, 不要用 cameCase 命名 -->

    <h3>{{ msg }}</h3>

    <h3>当前的 n 值是: <span v-text="n"></span></h3>
    <h3>放大10倍的 n 值是: <span v-big="n"></span></h3>
    <button @click="n++">点我n+1</button>

    <hr>

    <input type="text" v-fbind:value="n">
</div>

<script text="text/javascript">
    // 需求1: 定义一个 v-big 指令, 和 v-text 功能类似, 但是会把绑定的数值放大 10 倍
    // 需求2: 定义一个 v-fbind 指令, 和 v-bind 功能类似, 但是可以让其所绑定的 input 元素默认获取焦点

    const vm = new Vue({
        el: '#root',

        data: {
            n: 1,
            msg: 'Hello World'
        },

        directives: {
            // big 函数何时被调用?
            // 1.指令和元素成功绑定的时候
            // 2.指令所在的模板被重新解析的时候
            big(element, binding) {
                console.log(this) // 注意, 此处的 this 是 window
                element.innerHTML = binding.value * 10
            },

             fbind: {
                // 指令和元素成功绑定的时候
                bind(element, binding) {
                    element.value = binding.value
                },

                // 元素被放入页面的时候
                inserted(element, binding) {
                    element.focus()
                },

                // 指令所在的模板被重新解析的时候
                update(element, binding) {
                    element.value = binding.value
                    element.focus()
                },
            },
        },
    })
</script>
</body>
</html>